@keyframes transimage{
    99.99% {
      clip-path: inset(0 0 0 0);
    }
    to{
     
      clip-path:none ;
  
    }
  }
  
  @keyframes transitexte {
    from{
      opacity: 0;
      scale: 0.90;
    }
  
    to{
      opacity: 1;
      scale: 1;
      visibility: visible;
    }
  }
  /*pour la nav bar du header  */
  @keyframes transi-head{
    from{
      transform: translateY(-100px);
    }
    to{
      transform: translateY(1%);
    }
  }
  @keyframes cursor {
    50%{
      border-color: transparent;
    }
  }
  @keyframes typing{
    from{
      width: 0;
    }
  }
  /* pour l'apparition des textes depuis le dessous */
  @keyframes vanish{
    from{
      transform:translateY(-100%) ;
    }
    to{
      transform:translateY(0%) ;
    }
  }
  
/* pour l'image de l'ep mais c'est pas très beau */
  @keyframes rotation{
    from{
      visibility: hidden;
      transform: rotate(0deg);
      scale: 1;
    } 
    50%{
      scale: 1.05;
    }
    100%{
      transform: rotate(360deg);
    }
  }
/*  pour l'apparition des images depuis le coté gauche de l'image*/
  

@keyframes transimage{
  
    99.99% {
      clip-path: inset(0 0 0 0);
    }
    to{
      clip-path: none;
    }
  }


  /* ----------------------------------------------
 * Generated by Animista on 2023-5-10 14:49:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes bounce-in-top{
    0%{
    transform:translateY(-500px);
    animation-timing-function:ease-in;
    opacity:0
}
    38%{
    transform:translateY(0);
    animation-timing-function:ease-out;
    opacity:1
}
    55%{
    transform:translateY(-65px);
    animation-timing-function:ease-in;
}
    72%{
    transform:translateY(0);
    animation-timing-function:ease-out;
}
    81%{
    transform:translateY(-28px);
    animation-timing-function:ease-in;
}
    90%{
    transform:translateY(0);
    animation-timing-function:ease-out;
  }
    95%{
    transform:translateY(-8px);
    animation-timing-function:ease-in;
}
    100%{
    transform:translateY(0);
    animation-timing-function:ease-out;
    visibility: visible;
}
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes titleFadeIn{
  0%{
    transform: translateY(100%);
  opacity: 0;
  }
  100%{
    transform: translateY(0%);
    opacity: 1;
    visibility: visible;
  }
}



/* test pour anim texte */

@keyframes letterByLetter {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}
@keyframes scaleUp {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


@keyframes fadeInZoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounces {
  0%{
    transform: translateY(0);
    opacity: 0;
  }
  20%{
    transform: translateY(0);
    opacity: 0.3;
  }
  40% {
    transform: translateY(-30px);
    opacity: .6;
  }
  50%{
    transform: translateY(0);
    opacity: 0.9;
  }
  60% {
    transform: translateY(-15px);
  }
  80%{
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes SwipeUp{
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0%);
    visibility: visible;
  }
}
@keyframes SwipeLeft{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0%);
    visibility: visible;
  }
}
@keyframes SwipeRight{
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(0%);
    visibility: visible;
  }
}
@keyframes SwipeDown{
  0%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(0%);
    visibility: visible;
  }
}

@keyframes apparition{
  0%{
    opacity: 0;
    visibility: visible;

    
  }
  100%{
    opacity: 1;
    visibility: visible;

    
  }
}


@keyframes slide-in {
  100% {
      transform: translateX(0%);
  }
}
@keyframes slide-out {
  100% {
      transform: translateX(100%)
  }
}
@keyframes txt-appearance {
  100% {
      color: #222;
      /* couleur du titre qui est bakaa */
  }
}


@keyframes bounce {
0%{
  opacity: 0;
  transform:translateY(-150px);
  animation-timing-function:ease-in;
}
20%{
  opacity: .5;
  transform:translateY(0);
  animation-timing-function:ease-out;
}
40%{
  opacity: 1;
  transform:translateY(-75px);
  animation-timing-function:ease-in;
}
60%{
  opacity: 1;
  transform:translateY(0);
  animation-timing-function:ease-out;
}
80%{
  opacity: 1;
  ransform:translateY(-50px);
  animation-timing-function:ease-in;
}
100%{
  transform:translateY(0);
  animation-timing-function:ease-out;
  opacity: 1;
}
}